<template>
  <div class="login">
    <div class="logotext"></div>
    <div class="main">
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
        <h2 class="title">账号登录</h2>
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" type="text" auto-complete="off" @focus="isUsername=true"
                    @blur="isUsername=false" placeholder="账号">
            <!--            <svg-icon slot="prefix" icon-class="user" v-bind:class="{'color-class':isUsername}" class=" input-icon "/>-->
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            auto-complete="off"
            placeholder="密码"
            @focus="isPassword=true"
            @blur="isPassword=false"
            show-password
            @keyup.enter.native="handleLogin"
          >
<!--                        <svg-icon slot="prefix" icon-class="password" v-bind:class="{'color-class':isPassword}"-->
<!--                                  class="el-input__icon input-icon "/>-->
          </el-input>
        </el-form-item>

        <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 2vh 0px;">下次自动登录</el-checkbox>
        <span class="forgetpwd"><a href="#">忘记密码？</a></span>
        <el-form-item style="width:100%;">
          <el-button
            :loading="loading"
            size="medium"
            type="primary"
            style="width:100%;height:6vh;font-size: 20px;"
            @click.native.prevent="handleLogin"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
  import Cookies from "js-cookie";
  import {encrypt, decrypt} from '@/utils/jsencrypt'

  export default {
    name: "Login",
    data() {
      return {
        isUsername: false,
        isPassword: false,
        cookiePassword: "",
        loginForm: {
          username: "gongzhi",
          password: "admin123",
          rememberMe: false
        },
        loginRules: {
          username: [
            {required: true, trigger: "blur", message: "用户名不能为空"}
          ],
          password: [
            {required: true, trigger: "blur", message: "密码不能为空"}
          ]
        },
        loading: false,
        redirect: undefined
      };
    },
    watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect;
        },
        immediate: true
      }
    },
    created() {
      this.getCookie();
    },
    methods: {
      
      getCookie() {
        const username = Cookies.get("username");
        const password = Cookies.get("password");
        const rememberMe = Cookies.get('rememberMe')
        this.loginForm = {
          username: username === undefined ? this.loginForm.username : username,
          password: password === undefined ? this.loginForm.password : decrypt(password),
          rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
        };
      },
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true;
            if (this.loginForm.rememberMe) {
              Cookies.set("username", this.loginForm.username, {expires: 30});
              Cookies.set("password", encrypt(this.loginForm.password), {expires: 30});
              Cookies.set('rememberMe', this.loginForm.rememberMe, {expires: 30});
            } else {
              Cookies.remove("username");
              Cookies.remove("password");
              Cookies.remove('rememberMe');
            }
            this.$store
              .dispatch("Login", this.loginForm)
              .then(() => {
                this.$router.push({path: this.redirect || "/"});
              })
              .catch(() => {
                this.loading = false;
              });
          }
        });
      }
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss">
  .login {
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    height: 100%;
    /*background-color: #0D1D30;*/
    background: url("../assets/image/login/bg_grop.png") no-repeat center center;
    background-size: cover;
    position: relative;
  }

  .logo {
    position: absolute;
    /*top: 100px;*/
    /*left: 100px;*/
    top: 8vh;
    left: 8vw;
    /* height: 8vh; */
    width: 4vw;
  }

  .logotext {
    /*position: absolute;*/
    /*top: 180px;*/
    /*left: 380px;*/
    /*font-size: 60px;*/
    /*font-family: Noto Sans SC-Bold, Noto Sans SC;*/
    /*font-weight: bold;*/
    /*color: #0E6AFF;*/
    /*letter-spacing: 6px;*/
    position: absolute;
    top: 20vh;
    left: 20vw;
    font-size: 6vh;
    font-family: Noto Sans SC-Bold, Noto Sans SC;
    font-weight: bold;
    color: #0E6AFF;
    letter-spacing: 6px;
  }

  .main {
    position: relative;
    border-radius: 12px;
    box-shadow: 0px 2px 12px 0px rgba(9, 23, 39, 1);
    color: rgba(255, 255, 255, 1);
    top: 25%;
    right: 10%;

    h3 {
      margin-left: 52px;
      margin-top: 383px;
      margin-bottom: 0;
      font-size: 32px;

    }

    h4 {
      margin-left: 52px;
      font-size: 24px;
      margin-top: 16px;
    }

    .login-form {
      position: absolute;
      right: 0;
      top: 0;
      border-radius: 6px;
      background: #ffffff;
      /*width: 560px;*/
      /*height: 600px;*/
      width: 30vw;
      height: 60vh;
      /*padding: 74px 60px 154px 60px;*/
      padding: 3vw 3vw 6vw 3vw;
      .title {
        /*width: 85px;*/
        font-size: 22px;
        margin: 0px auto 46px auto;
        /*border-bottom: 3px rgba(27, 74, 127, 1) ridge;*/
        text-align: center;
        color: $primarycolor;
        padding-bottom: 8px;
      }

      .el-form-item {
        margin-bottom: 3vh;
      }

      .el-input {
        height: 6.5vh;
        font-size: 20px;


        input {
          outline: none;
          width:24.5vw;
          height:6.5vh;
          background: #FFFFFF;
          border-radius: 4px 4px 4px 4px;
          opacity: 1;
          border: 1px solid #E4E7ED;
        }

      }

      .color-class {
        color: rgba(6, 104, 185, 1);
      }

      .input-icon {
        height: 39px;
        width: 19px;
        margin-left: 2px;
      }
    }
  }

  .forgetpwd {
    float: right;
    color: $primarycolor;
    font-weight: bold;
    font-size: 14px;
  }



</style>
